<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="myApp">
    <ul>
        <li><a href="#/my">我的音乐</a></li>
        <li><a href="#/home">首页</a></li>
        <li><a href="#/home2">首页2</a></li>
        <li><a href="#/home3">首页3</a></li>
        <li><a href="#/home4">首页4</a></li>
    </ul>
    <div ng-view>

    </div>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script>
    //1.引用angularjs和angularroutejs文件
    //2.创建模块并将ngRoute模块引用过来
    var app=angular.module('myApp',['ngRoute']);
    //3.创建路由表
    //通过config来配置路由表
    //run 配置参数
    //config 配置服务
    //通过$routeProvider供应商来配置路由表
    app.config(function ($routeProvider,$locationProvider) {
        //angular1.6.1中需要添加的数据
        //如果使用的是1.6.1版本不想匹配！需要添加此代码
         $locationProvider.hashPrefix('');
        //$routeProvider类似于 switch
        //when 类似于 case
        //通过when来处理每一条路由数据
        $routeProvider
            .when('/my',{
                template:'<h1>hello ngroute</h1>'
            })
            .when('/home',{
                template:'<h1>{{text}}</h1>',
                controller:function ($scope) {
                    $scope.text='controller'
                }
            })
            .when('/home2',{
                templateUrl:'template.html',
                controller:function ($scope) {
                    $scope.text='templateUrl'
                }
            })
            .when('/home3',{
                //通过controller来管理template模板页面
                templateUrl:'template.html',
                controller:function ($scope) {
                    $scope.text='templateUrl3'
                }
            })
            //如果想条路由的路径中部分参数变化
            //:表示后面的id是可以变换的
            //?表示该参数可以为空
            .when('/home4/:id?/:page?',{
                templateUrl:'template.html',
                controller:'myCtrl'
            })
            .otherwise({
                //在redirectTo什么都匹配不上的情况下调用这条路由
                redirectTo:'/home4'
            })
    });
    app.controller('myCtrl',function ($scope,$routeParams) {
        console.log($routeParams);
        $scope.text='myCtrl'
    })
</script>
</html>